<template>
	<view class="page-box">
		<view class="bg-top">
			<uni-nav-bar ref="navBar" statusBar :border="false" @clickLeft="goBack" backgroundColor="transparent" left-width="36px">
				<template v-slot:left>
					<image class="size-32" src="@/static/svg/icon-back.svg"/>
				</template>
				<template>
					<view class="flex item-center justify-center" style="width: 100%;margin-right: 32px;">
						<image src="@/static/image/home-logo.png" class="size-32 mr-4" style="border-radius: 50%;">
						</image>
						<view class="flex item-center">
							<text class="title-main text-bold" style="margin-right: 4px;">火动通告 </text> |
							<text class="title-sec" style=" margin-left: 4px;">商家端</text>
						</view>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="type-inner-box">
			<view class="type-header">欢迎入驻火动通告</view>
			<view class="type-text">请选择入驻类型</view>
			<view class="type-inner" @click="selectType('1')">
				<image v-show="type === '1'" src="@/applyPages/static/applyTypeSelect-1.svg" mode="widthFix" class="apply-select"></image>
				<image src="@/applyPages/static/applyType-1.svg" mode="widthFix" class="apply-image"></image>
				<text class="apply-title">自建资金账户</text>
				<text class="apply-text">使用企业对公信息开设虚拟资金账户，拥有账户独立管理权限</text>
			</view>
			<view class="type-inner green-bg" @click="selectType('2')">
				<image v-show="type === '2'" src="@/applyPages/static/applyTypeSelect-2.svg" mode="widthFix" class="apply-select"></image>
				<image src="@/applyPages/static/applyType-2.svg" mode="widthFix" class="apply-image"></image>
				<text class="apply-title">平台结算池账户</text>
				<text class="apply-text">不需要开设虚拟资金账户，资金由平台结算并管理</text>
			</view>
		</view>
		<view class="fix-btn" @click="confirm">确定</view>
		<view class="k-page"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import { myPageApi } from '@/api/index.js'
	import { validSettleCode } from '@/api/business.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import { parseScene } from '@/utils/index.js'
	const userStore = useUserStore()
	const goBack = () => {
		uni.navigateBack()
	}
	const code = ref('')
	const show = ref(true)
	const type = ref('')
	const result = ref('')
	const selectType = (value) => {
		type.value = value
	}
	const confirm = () => {
		if(!type.value) {
			return uni.showToast({
				icon: 'none',
				title: '请选择入驻类型'
			})
		}
		userStore.setApplyType(type.value)
		let params = code.value?`?code=${code.value}`:``
		if(result.value){
			params = params ? params + '&result=rebuild' : '?result=rebuild'
		}
		if(type.value === '1'){
			uni.navigateTo({
				url: `/applyPages/bussinessApply/bussinessAgreement${params}`
			})
		}else{
			uni.navigateTo({
				url: `/applyPages/bussinessApply/bussinessAgreement1${params}`
			})
		}
	}
	onLoad((query) => {
		if(query.code){
			code.value = query.code
		}
		// 扫码打开
		if (query.scene) {
			const scene = parseScene(query.scene)
			if (!query.code && scene.code) {
				code.value = scene.code
			}
		}
		if(query.result == 'rebuild'){
			result.value = 'rebuild'
		}
	})
</script>

<style lang="scss" scoped>
.page-box{
	width: 100vw;
	min-height: 100vh;
}
.bg-inner{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.bg-top{
	position: relative;
	top: 0;
	left: 0;
	overflow-y: auto;
	.image-bg{
		width: 100%;
		// position: absolute;
		// left: 0;
		// top: 0;
	}
	.image-title{
		width: 316rpx;
		margin-top: 90rpx;
	}
	.image-tip{
		width: 356rpx;
		margin-top: 20px;
	}
	.img-right{
		width: 468rpx;
		position: absolute;
		left: 278rpx;
		top: 0;
	}
}
.type-inner-box{
	margin: 0 20px;
	.type-header{
		margin: 48rpx 0;
		display: flex;
		justify-content: center;
		font-weight: 600;
		font-size: 40rpx;
		color: #333333;
	}
	.type-text{
		font-size: 28rpx;
		color: #333333;
	}
	.type-inner{
		padding: 48rpx;
		color: #FFFFFF;
		margin-top: 32rpx;
		width: 686rpx;
		height: 316rpx;
		background: linear-gradient( 180deg, #0A77E6 0%, #7CC8F9 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		.apply-select{
			z-index: 1;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
		&.green-bg{
			background: linear-gradient( 180deg, #16BE62 0%, #1AC396 100%);
		}
		.apply-title{
			font-weight: 600;
			font-size: 32rpx;
			margin: 24rpx 0;
		}
	}
}
.apply-image{
	width: 88rpx;
}
.k-page{
	height: 40px;
}
.fix-btn{
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 40px);
	margin: 20px;
	height: 46px;
	line-height: 46px;
	background-color: #FA4543;
	text-align: center;
	color: #FFFFFF;
	font-weight: 400;
	font-size: 16px;
	border-radius: 8px;
}
</style>
